<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>博客后台管理</title>
		<link rel="stylesheet" href="../../js/layui/css/layui.css">
		<script src="../../js/vue/vue.js"></script>
		<script src="../../js/vue/axios.min.js"></script>
		<script src="../../js/layui/layui.js"></script>
		<script src="../../js/rotate.js"></script>
		<style>
			.layui-body {
				overflow-y: hidden;
				overflow-x: hidden;
			}

			.zth-top-logo a {
				margin-top: 20px;
				font-size: 20px;
				font-family: "楷体";
				color: #009E94;
				cursor: pointer;
			}

			.zth-top-img {
				width: 150px;
				margin-bottom: 15px;
				cursor: pointer;
			}

			.layui-layout-admin .layui-header {
				background-color: black;
			}

			.zth-top-i1 {
				font-size: 30px;
				color: #1E9FFF;
				cursor: pointer;
			}

			.zth-top-i2 {
				font-size: 30px;
				color: #FD482C;
				cursor: pointer;
			}

			.layui-nav {
				height: 60px;
			}

			.zth-top-a {
				border: #009688 3px solid;
				border-radius: 5px;
				width: 38px;
				position: relative;
				left: 1000px;
				bottom: 50px;
			}

			.zth-top-a a {
				border: none;
				color: rgb(158, 187, 189);
				font-size: 18px;
				font-family: "楷体";
			}

			.zth-left-head a {
				display: inline-block;
				width: 100%;
				height: 50px;
				font-family: "楷体";
			}

			.zth-left-head a:hover {
				background: rgba(78, 84, 101, 0.2);
			}

			.zth-left-head span {
				display: inline-block;
				margin-left: 15px;
				margin-top: 10px;
				color: #8D8D8D;
				font-size: 18px;
			}

			.zth-left-title {
				margin-top: 20px;
				font-size: 16px;
				font-family: "楷体";
				color: #CCCCCC;
				font-weight: bold;
			}

			.zth-left-border {
				margin-top: 5px;
				border-bottom: #CCCCCC 1px dotted;
			}

			.layui-nav-item a {
				font-size: 18px;
				font-family: "楷体";
			}

			.zth-bottom-base {
				text-align: center;
				font-size: 18px;
				font-family: "宋体";
				font-weight: bold;
				color: #B2B2B2;
			}

			iframe {
				display: block;
				width: 100%;
				height: 620px;
				border: none;
				border-top: #C2C2C2 1px dashed;
				border-left: #C2C2C2 1px dashed;
			}

			.zth-footer {
				position: fixed;
				left: 0px;
				right: 0;
				bottom: 0;
				height: 44px;
				line-height: 44px;
				padding: 0 15px;
				background-color: #eee
			}

			a,
			img {
				border: 0;
			}

			/* rotate */
			#rotate {
				position: relative;
				margin: 10px auto;
			}

			#rotate a {
				position: absolute;
				top: 0px;
				left: 0px;
				color: black;
				font-weight: bold;
				padding: 3px 6px;
				font-size: 14px;
			}

			#rotate a:hover {
				border: 1px solid #eee;
				background: #000;
				border-radius: 5px;
			}
		</style>
	</head>
	<body class="layui-layout-body">
		<div id="app">
			<div class="layui-layout layui-layout-admin">
				<div class="layui-header">
					<div class="layui-logo  zth-top-logo">
						<img src="../../images/logo2.png" @click="onLogo" class=" zth-top-img"> <i @click="shows" class="layui-icon layui-icon-face-smile"
						 :class="show?'zth-top-i1':'zth-top-i2'"></i>
					</div>
					<!-- 头部区域（可配合layui已有的水平导航） -->
					<ul class="layui-nav layui-layout-left">
						<li class="layui-nav-item"><a href="">{{menu[index]}}</a></li>
						<li class="zth-top-a"><a href="../front/main.html">用户页面</a></li>

					</ul>
				</div>

				<div v-show="show" class="layui-side layui-bg-black">
					<div class="layui-side-scroll">
						<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
						<ul class="layui-nav layui-nav-tree" lay-filter="test">

							<li class="zth-left-head"><a href=""><span><img :src="img" class="layui-nav-img"> {{nick_name}}</span></a></li>

							<li class="zth-left-title">dashboard</li>
							<li class="zth-left-border"></li>
							<li class="layui-nav-item"><a :href="href[0]" target="myIframe" @click="topText(0)">{{menu[0]}}</a></li>
							<li class="layui-nav-item"><a :href="href[1]" target="myIframe" @click="topText(1)">{{menu[1]}}</a></li>
							<li class="zth-left-title">管理模块</li>
							<li class="zth-left-border"></li>
							<li class="layui-nav-item"><a :href="href[2]" target="myIframe" @click="topText(2)">{{menu[2]}}</a></li>
							<li class="layui-nav-item"><a :href="href[3]" target="myIframe" @click="topText(3)">{{menu[3]}}</a></li>
							<li class="layui-nav-item"><a :href="href[4]" target="myIframe" @click="topText(4)">{{menu[4]}}</a></li>
							<li class="layui-nav-item"><a :href="href[5]" target="myIframe" @click="topText(5)">{{menu[5]}}</a></li>
							<li class="layui-nav-item"><a :href="href[6]" target="myIframe" @click="topText(6)">{{menu[6]}}</a></li>
							<li class="zth-left-title">系统管理</li>
							<li class="zth-left-border"></li>
							<li class="layui-nav-item"><a :href="href[7]" target="myIframe" @click="topText(7)">{{menu[7]}}</a></li>
							<li class="layui-nav-item"><a :href="href[8]" target="myIframe" @click="topText(8)">{{menu[8]}}</a></li>
							<li class="layui-nav-item"><a href="" @click="logout">{{menu[9]}}</a></li>
						</ul>
					</div>
				</div>
				<div v-show="conceal">
					<div id="rotate">
						<a :href="href[0]" target="myIframe" @click="topText(0)">{{menu[0]}}</a>
						<a :href="href[1]" target="myIframe" @click="topText(1)">{{menu[1]}}</a>
						<a :href="href[2]" target="myIframe" @click="topText(2)">{{menu[2]}}</a>
						<a :href="href[3]" target="myIframe" @click="topText(3)">{{menu[3]}}</a>
						<a :href="href[4]" target="myIframe" @click="topText(4)">{{menu[4]}}</a>
						<a :href="href[5]" target="myIframe" @click="topText(5)">{{menu[5]}}</a>
						<a :href="href[6]" target="myIframe" @click="topText(6)">{{menu[6]}}</a>
						<a :href="href[7]" target="myIframe" @click="topText(7)">{{menu[7]}}</a>
						<a :href="href[8]" target="myIframe" @click="topText(8)">{{menu[8]}}</a>
						<a href="" @click="logout">{{menu[9]}}</a>
						
						<a :href="href[0]" target="myIframe" @click="topText(0)">{{menu[0]}}</a>
						<a :href="href[1]" target="myIframe" @click="topText(1)">{{menu[1]}}</a>
						<a :href="href[2]" target="myIframe" @click="topText(2)">{{menu[2]}}</a>
						<a :href="href[3]" target="myIframe" @click="topText(3)">{{menu[3]}}</a>
						<a :href="href[4]" target="myIframe" @click="topText(4)">{{menu[4]}}</a>
						<a :href="href[5]" target="myIframe" @click="topText(5)">{{menu[5]}}</a>
						<a :href="href[6]" target="myIframe" @click="topText(6)">{{menu[6]}}</a>
						<a :href="href[7]" target="myIframe" @click="topText(7)">{{menu[7]}}</a>
						<a :href="href[8]" target="myIframe" @click="topText(8)">{{menu[8]}}</a>
						<a href="" @click="logout">{{menu[9]}}</a>
						
						<a :href="href[0]" target="myIframe" @click="topText(0)">{{menu[0]}}</a>
						<a :href="href[1]" target="myIframe" @click="topText(1)">{{menu[1]}}</a>
						<a :href="href[2]" target="myIframe" @click="topText(2)">{{menu[2]}}</a>
						<a :href="href[3]" target="myIframe" @click="topText(3)">{{menu[3]}}</a>
						<a :href="href[4]" target="myIframe" @click="topText(4)">{{menu[4]}}</a>
						<a :href="href[5]" target="myIframe" @click="topText(5)">{{menu[5]}}</a>
						<a :href="href[6]" target="myIframe" @click="topText(6)">{{menu[6]}}</a>
						<a :href="href[7]" target="myIframe" @click="topText(7)">{{menu[7]}}</a>
						<a :href="href[8]" target="myIframe" @click="topText(8)">{{menu[8]}}</a>
						<a href="" @click="logout">{{menu[9]}}</a>
					</div>
				</div>

				<div :class="{'layui-body':show}">
					<!-- 内容主体区域 -->
					<div style="padding: 15px;">
						<iframe src="dashboard/dashboard.html" name="myIframe"></iframe>
					</div>
				</div>

				<div :class="show?'layui-footer':'zth-footer'">
					<!-- 底部固定区域 -->

					<div class="zth-bottom-base">该网页的使用权和最终解释权为该网页开发者所有</div>
				</div>
			</div>
		</div>
		<script>
			//	截取登录路径 获取登录id
			var href = location.href;
			var index = href.indexOf("?");
			var sub = href.substr(index, href.length);
			var indexs = href.indexOf("=");
			var subs= href.substr(indexs+1, href.length);
			//JavaScript代码区域
			var $;
			layui.use(['element','jquery'], function() {
				var element = layui.element;
				$=layui.jquery;
			});

			new Vue({
				el: "#app",
				data: {
					//操作左侧菜单栏显示隐藏
					show: true,
					//操作滚动菜单显示隐藏
					conceal: false,
					//菜单栏
					menu: ['dashboard', '发布博客', '博客管理', '评论管理', '分类管理', '标签管理', '友情链接', '系统配置', '修改密码', '安全退出'],
					href: ['dashboard/dashboard.html', 'tb_blog1/tb_blog1.html', 'tb_blog2/tb_blog2.html', 'blog_comment/tb_blog_comment.html',
						'blog_category/blog_category.html', 'tb_blog_tag/tb_blog_tag.html', 'tb_link/tb_link.html',
						'tb_config/tb_config.html', '../user/edit.html'+sub
					],
					//昵称
					nick_name:'',
					//获取点击菜单的下标
					index: 0,
					img:''
				},
				//访问页面自动调用方法
				mounted:function(){
					this.nickName();
					this.configimg();
				},
				methods: {
					//显示隐藏菜单栏
					shows: function() {
						this.show = !this.show;
						this.conceal = !this.conceal;
s					},
					//点击访问用户后端主页面
					onLogo: function() {
						location.href = "main.html" + sub;
					},
					//获取点击的页面名称
					topText: function(index) {
						this.index = index;
					},
					//安全退出
					logout: function() {
						axios.get('/ssb/user/logout').then(res => {
							console.log(res);
						}, err => {
							console.log(err);
						});
						
					},
					//获取到登录用户昵称
					nickName:function(){
						axios.get('/ssb/user/findById?id='+subs).then(res=>{
							this.nick_name=res.data.nick_name;
						},err=>{
							console.log(err);
						});
					},
					configimg:function(){
						axios.get('/ssb/config/findAll').then(res=>{
								this.img=res.data[9].config_value
							},err=>{
								console.log(res);
							});
					}
				}
			});
		</script>


	</body>
</html>
